<template>
<div class="content-wrapper">
 <common-title title="天眼总览" imgSrc="/src/assets/img/left-top.png"></common-title>>
    <div class="list-wrapper">
        <div class="list" v-for="(item, index) in listData" :key="index">
            <span class="label">{{item.name}}</span>
            <span class="value">{{item.value}}</span>
            <div class="chart-out">
                <div class="chart-in"></div>
            </div>
        </div>
    </div>
</div>
</template>
<script setup lang="ts">
import { ListData } from '@/types/left-top.ts'
import { reactive } from 'vue';
import commonTitle from './commonTitle.vue';
const listData = reactive<ListData>([
    {name:'线索总数',value: 37869},
    {name:'摄像头总数',value: 37869},
    {name:'摄像头在线数',value: 37869},
    {name:'覆盖面积',value: 17869},
    {name:'覆盖占比',value: 17869},
])
</script>
<style lang="scss" scoped>
.content-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;


    .list-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 20px;
        .list{
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 433px;
            height: 28px;
            background: linear-gradient(0deg, #5486D5 0%, rgba(84,134,213,0) 70%);
          
            .label {
                width: 108px;
                font-size: 18px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #F0F8FF
            }
            .value {
                width: 120px;
                font-size: 36px;
                font-family: DIN;
                font-weight: bold;
                color: #00FFFF;
            }
            .chart-out {
                width: 66px;
                height: 16px;
                background: rgba(0,255,255,0.38);
                border-radius: 8px;
                .chart-in {
                    width: 22px;
                    height: 16px;
                    background: #00FFFF;
                    border-radius: 6px;
                }
            }
        }
    }
}
</style>